<template>
  <div class="ticket_coupon">
    <el-tabs v-model="activeName">
      <el-tab-pane style="margin-top: 30px;" label="优惠券列表" name="first">
        <el-row style="text-align: left; margin-top: -10px; margin-bottom: 20px;" :gutter="20">
          <el-col :span="12">
            <el-button type="primary" size="mini" @click="addCoupon"><i class="el-icon-document-add"></i> 增加</el-button>
            <el-button type="primary" size="mini" @click="refreshViews"> <i class="el-icon-refresh"></i> 刷新
            </el-button>
          </el-col>
        </el-row>
        <el-card style="margin-top: 30px;" shadow="always">
          <el-table :data="couponTableDataPage" height="450" border style="width: 100%"
            :default-sort="{prop: 'createTime', order: 'descending'}">
            <el-table-column fixed prop="couponNumber" sortable label="券编号" width="280">
            </el-table-column>
            <el-table-column prop="totalNum" sortable label="券个数" width="100">
            </el-table-column>
            <el-table-column prop="occupyCount" sortable label="被领取个数" width="140">
            </el-table-column>
            <el-table-column prop="usedCount" sortable label="被使用个数" width="140">
            </el-table-column>
            <el-table-column prop="uniqueKey" label="券唯一标识" width="140">
            </el-table-column>
            <el-table-column prop="startCity" label="起飞城市" width="80">
            </el-table-column>
            <el-table-column prop="endCity" label="抵达城市" width="80">
            </el-table-column>
            <el-table-column prop="fullMoney" sortable label="满" width="80">
            </el-table-column>
            <el-table-column prop="reduceMoney" sortable label="减" width="80">
            </el-table-column>
            <el-table-column prop="des" label="抵用券描述" width="180">
            </el-table-column>
            <el-table-column prop="couponType" label="抵用券类型" width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.couponType == 1">单程</span>
                <span v-if="scope.row.couponType == 2">往返</span>
              </template>
            </el-table-column>
            <el-table-column prop="effectiveStartTime" sortable label="有效开始时间" width="180">
            </el-table-column>
            <el-table-column prop="effectiveEndTime" sortable label="有效结束时间" width="180">
            </el-table-column>
            <el-table-column prop="startTime" sortable label="领券时间开始" width="180">
            </el-table-column>
            <el-table-column prop="endTime" sortable label="领券时间结束" width="180">
            </el-table-column>
            <el-table-column prop="createTime" sortable label="创建时间" width="180">
            </el-table-column>
          </el-table>
          <el-pagination style="margin-top: 20px; text-align: right;" background layout="sizes,prev, pager, next"
            :total="couponTableData.length" @size-change="sizeChange" :hide-on-single-page="true"
            @prev-click="prevClick" @next-click="nextClick" @current-change="currentChange">
          </el-pagination>
        </el-card>
      </el-tab-pane>
      <el-tab-pane style="text-align: left;" label="优惠券详情" name="second">
        优惠券查询
        <el-select filterable allow-create default-first-option @change="changeOptions" v-model="value" clearable
          placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-card style="margin-top: 30px;" shadow="always">
          <el-table :data="oneCouponAllTableDataPage" height="450" border style="width: 100%"
            :default-sort="{prop: 'createTime', order: 'descending'}">
            <el-table-column fixed prop="couponNumber" sortable label="券编号" width="280">
            </el-table-column>
            <el-table-column prop="totalNum" sortable label="券个数" width="100">
            </el-table-column>
            <el-table-column prop="status" label="券状态" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1">在线</span>
                <span v-if="scope.row.status == 0">下架</span>
                <span v-if="scope.row.status == 2">被占用</span>
                <span v-if="scope.row.status == 3">被使用</span>
              </template>
            </el-table-column>
            <el-table-column prop="uniqueKey" label="券唯一标识" width="140">
            </el-table-column>
            <el-table-column prop="startCity" label="起飞城市" width="80">
            </el-table-column>
            <el-table-column prop="endCity" label="抵达城市" width="80">
            </el-table-column>
            <el-table-column prop="fullMoney" sortable label="满" width="80">
            </el-table-column>
            <el-table-column prop="reduceMoney" sortable label="减" width="80">
            </el-table-column>
            <el-table-column prop="des" label="抵用券描述" width="180">
            </el-table-column>
            <el-table-column prop="couponType" label="抵用券类型" width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.couponType == 1">单程</span>
                <span v-if="scope.row.couponType == 2">往返</span>
              </template>
            </el-table-column>
            <el-table-column prop="effectiveStartTime" sortable label="有效开始时间" width="180">
            </el-table-column>
            <el-table-column prop="effectiveEndTime" sortable label="有效结束时间" width="180">
            </el-table-column>
            <el-table-column prop="startTime" sortable label="领券时间开始" width="180">
            </el-table-column>
            <el-table-column prop="endTime" sortable label="领券时间结束" width="180">
            </el-table-column>
            <el-table-column prop="createTime" sortable label="创建时间" width="180">
            </el-table-column>
          </el-table>
          <el-pagination style="margin-top: 20px; text-align: right;" background layout="sizes,prev, pager, next"
            :total="oneCouponAllTableData.length" @size-change="pageSizeChange" :hide-on-single-page="true"
            @prev-click="pagePrevClick" @next-click="pageNextClick" @current-change="pageCurrentChange">
          </el-pagination>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="增加优惠券" :visible.sync="dialogFormVisible">
      <el-form :model="couponForm">
        <el-form-item label="券个数">
          <el-input v-model="couponForm.totalNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="起飞城市">
          <el-input v-model="couponForm.startCity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="抵达城市">
          <el-input v-model="couponForm.endCity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="满">
          <el-input v-model="couponForm.fullMoney" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="减">
          <el-input v-model="couponForm.reduceMoney" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="couponForm.des" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="抵用券类型">
          <template>
            <el-radio v-model="couponForm.couponType" label="1">单程</el-radio>
            <el-radio v-model="couponForm.couponType" label="2">往返</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="有效开始时间">
          <el-date-picker v-model="couponForm.effectiveStartTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="有效结束时间">
          <el-date-picker v-model="couponForm.effectiveEndTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="领券开始时间">
          <el-date-picker v-model="couponForm.startTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="领券结束时间">
          <el-date-picker v-model="couponForm.endTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canclAddCoupon">取 消</el-button>
        <el-button type="primary" @click="confirmAddCoupon">增 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    filters: {

    },
    data() {
      return {
        activeName: "first",
        value: "",
        options: [],
        dialogFormVisible: false,
        couponForm: {
          totalNum: 10,
          startCity: '',
          endCity: '',
          fullMoney: 100,
          reduceMoney: 10,
          des: '满100减10',
          couponType: "1",
          effectiveStartTime: new Date(),
          effectiveEndTime: new Date(),
          startTime: new Date(),
          endTime: new Date()
        },
        couponTableData: [],
        oneCouponAllTableData: [],
        oneCouponAllTableDataPage: [],
        couponTableDataPage: [],
        pageSize: 10,
        detailPageSize: 10
      }
    },
    created() {},
    mounted() {
      let vm = this
      vm.queryCouponTableData()
      vm.initCouponOptions()
    },
    methods: {
      changeOptions(value) {
        let vm = this
        if (!value || value == null || value == '') {
          vm.$message.warning("查询值不能为空")
          return
        }
        axios({
          method: 'get',
          url: process.env.BASE_API + `/coupon-service/coupon/searchOneCouponListByUNK/` + value,
        }).then(function(res) {
          if (res.data.success) {
            vm.$message.success(res.data.message)
            vm.oneCouponAllTableData = res.data.data.couponUNKList
            vm.oneCouponAllTableDataPage = vm.oneCouponAllTableData.splice(0, vm.detailPageSize)
          } else {
            vm.$message.warning(res.data.message)
          }
        })
      },
      initCouponOptions() {
        let vm = this
        axios({
          method: 'get',
          url: process.env.BASE_API + `/coupon-service/coupon/searchCouponListUNK`,
        }).then(function(res) {
          if (res.data.success) {
            vm.$message.success(res.data.message)
            vm.options = res.data.data.couponUNKList
          } else {
            vm.$message.warning(res.data.message)
          }
        })
      },
      addCoupon() {
        let vm = this
        vm.dialogFormVisible = true
      },
      refreshViews() {
        let vm = this
        vm.couponTableData = []
        vm.queryCouponTableData()
        vm.initCouponOptions()
      },
      queryCouponTableData() {
        let vm = this
        axios({
          method: 'get',
          url: process.env.BASE_API + `/coupon-service/coupon/searchAllCoupons`,
        }).then(function(res) {
          if (res.data.success) {
            vm.$message.success(res.data.message)
            vm.couponTableData = res.data.data.couponList
            // 分页
            vm.couponTableDataPage = vm.couponTableData.slice(0, vm.pageSize)
          } else {
            vm.$message.warning(res.data.message)
          }
        })
      },
      canclAddCoupon() {
        let vm = this
        vm.couponForm = {
          totalNum: 10,
          startCity: '',
          endCity: '',
          fullMoney: 100,
          reduceMoney: 10,
          des: '满100减10',
          couponType: "1",
          effectiveStartTime: new Date(),
          effectiveEndTime: new Date(),
          startTime: new Date(),
          endTime: new Date()
        }
        vm.dialogFormVisible = false
      },
      // 前端分页
      prevClick(e) {
        this.couponTableDataPage = this.couponTableData.slice((e - 1) * this.pageSize, e * this.pageSize)
      },
      nextClick(e) {
        this.couponTableDataPage = this.couponTableData.slice((e - 1) * this.pageSize, e * this.pageSize)
      },
      currentChange(e) {
        this.couponTableDataPage = this.couponTableData.slice((e - 1) * this.pageSize, e * this.pageSize)
      },
      sizeChange(e) {
        this.pageSize = e
        this.couponTableDataPage = this.couponTableData.slice(0, e)
      },

      pagePrevClick(e) {
        this.oneCouponAllTableDataPage = this.oneCouponAllTableData.slice((e - 1) * this.detailPageSize, e * this
          .detailPageSize)
      },
      pageNextClick(e) {
        this.oneCouponAllTableDataPage = this.oneCouponAllTableData.slice((e - 1) * this.detailPageSize, e * this
          .detailPageSize)
      },
      pageCurrentChange(e) {
        this.oneCouponAllTableDataPage = this.oneCouponAllTableData.slice((e - 1) * this.detailPageSize, e * this
          .detailPageSize)
      },
      pageSizeChange(e) {
        this.detailPageSize = e
         this.oneCouponAllTableDataPage = this.oneCouponAllTableData.slice(0, e)
      },
      // oneCouponAllTableData
      confirmAddCoupon() {
        let vm = this
        // 数据验证
        if (vm.couponForm.effectiveStartTime == null ||
          vm.couponForm.effectiveEndTime == null ||
          vm.couponForm.startTime == null ||
          vm.couponForm.endTime == null
        ) {
          vm.$message.warning("请选择所有时间")
          return;
        }
        if (vm.couponForm.startCity.trim() == '' || vm.couponForm.endCity.trim() == '') {
          vm.$message.warning("请填写出发抵达城市")
          return;
        }
        if (Number(vm.couponForm.totalNum) <= 0) {
          vm.$message.warning("抵用券个数必须大于0")
          return;
        }
        if (Number(vm.couponForm.fullMoney) < 100) {
          vm.$message.warning("满必须大于等于100")
          return;
        }
        if (Number(vm.couponForm.reduceMoney) <= 0 || Number(vm.couponForm.reduceMoney) > Number(vm.couponForm
            .fullMoney)) {
          vm.$message.warning("减必须大于0且小于满")
          return;
        }
        if (vm.couponForm.des.trim() == '') {
          vm.$message.warning("必须填写描述")
          return;
        }
        vm.couponForm.couponType = Number(vm.couponForm.couponType)
        axios({
          method: 'post',
          dataType: 'json',
          contentType: 'application/json;charset=UTF-8',
          url: process.env.BASE_API + `/coupon-service/coupon/addCoupons`,
          data: vm.couponForm,
        }).then(function(res) {
          if (res.data.success) {
            vm.$message.success(res.data.message)
            vm.canclAddCoupon()
            vm.dialogFormVisible = false
          } else {
            vm.$message.warning(res.data.message)
          }
        })
      }
    }
  }
</script>
<style>
  .ticket_coupon {
    text-align: center;
    margin-left: 2%;
    margin-right: 2%;
  }

  .el-tabs--left .el-tabs__nav-wrap.is-left::after {
    width: 0px;
  }

  .el-tabs__nav-wrap::after {
    height: 0px;
  }
</style>
